import React from 'react'
import { connect } from 'dva';
import { Carousel } from 'antd-mobile';

class Sugtab extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }
  componentDidMount() {
    // simulate img loading
  }
  render() {
    const {val} = this.props;
    return (
    <div>
        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) => {}}
          afterChange={index => {}}
        >
          {val.map((url,key) => (
            <a
              style={{ display: 'inline-block', width: '100%' }}
              key = {key}
            >
              <img
                src={`${url}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
      </div>
    );
  }
}

export default connect()(Sugtab);